<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="renderer" content="webkit">
<title>个人电子会员卡</title>
<!-- 
针对 多屏 做 适配
 -->
<script type="text/javascript" src="../resources/js/zepto1.1.6.min.js"></script>

<script src="js/code128/code128.js" type="text/javascript" charset="utf-8"></script>
<script src="js/code128/NewCODE128.js"></script>
<script src="js/code128/JsBarcode.js"></script>
<script type="text/javascript">
	window.onload = function() {
		//console.log(document.getElementById("container").style.height);
		//console.log(window.screen.availHeight);
		document.getElementById("container").style.height = window.screen.availHeight/2 + 'px';

		document.getElementById("container").style.width = window.screen.availWidth + 'px';

		JsBarcode(document.getElementById("rotImg"), '1222', {
			quite : 10,
			format : "CODE128",
			displayValue : true,
			font : "monospace",
			textAlign : "center",
			fontSize : 12,
			backgroundColor : "",
			lineColor : "#000"
		});

		var param = {
			right : document.getElementById("rotRight"),
			left : document.getElementById("rotLeft"),
			img : document.getElementById("rotImg"),
			cv : document.getElementById("canvas"),
			rot : 0
		};
		var oldh = document.getElementById("rotImg").height;
		var oldw = document.getElementById("rotImg").width;
		var global = false;
		var rotate = function(degrees, step, current) {
			var self = document.getElementById("rotImg");
			current = current || 0;
			step = step || 5;
			current += step;
			/* self.css({
				'-webkit-transform' : 'rotate(' + current + 'deg)',
				'-moz-transform' : 'rotate(' + current + 'deg)',
				'-ms-transform' : 'rotate(' + current + 'deg)',
				'transform' : 'rotate(' + current + 'deg)'
			}); */
			if (!global) {//正常
				self.style.width = window.screen.availWidth;
				self.style.height = null;
				document.getElementById("container").style.paddingTop = 5+"%";
			} else {
				var wh = oldw / oldh;
				h = window.screen.availHeight;
				if (wh > window.screen.availWidth / h) {
					w = h * window.screen.availWidth / h;
				}
				//self.style.height = h + "px";
				//self.style.width = h + "px";
				document.getElementById("container").style.paddingTop = 20+"%";
				console.log(document.getElementById("container").style.width);
			}
			self.style.webkitTransform = 'rotate(' + current + 'deg)';
			self.style.mozTransform = 'rotate(' + current + 'deg)';
			self.style.msTransform = 'rotate(' + current + 'deg)';
			self.style.transform = 'rotate(' + current + 'deg)';

			if (current != degrees) {
				setTimeout(function() {
					rotate(degrees, step, current);
				}, 5);
			}
		};

		/* param.right.onclick = function() {
			rotate(270);
		};
		param.left.onclick = function() {
			rotate(0, -5, 90);
		}; */

		param.img.onclick = function() {
			if (window.screen.availWidth > window.screen.availHeight) {
				return;
			}

			if (!global) {// 向左转
				// 加大 宽度 跟高度
				rotate(270);

			} else {// 恢复
				rotate(0, -5, 90);
			}
			global = !global;

		};
	};
</script>
<style type="text/css">
.box {
	width: 100%;
	text-align: center;
	position: relative;
	overflow-x: hidden;
	overflow-y: auto;
	display: table-cell;
	padding-top: 5%;
}

.box .inner {
	position: static; +
	position: relative;
}
</style>
</head>
<body style="margin : 0%;">
	<div id="container" class="box">
		<img id="rotImg" class='inner' style="-webkit-transform: rotate(0deg); transform: rotate(0deg); width: 90%; text-align: center;" />

		<!-- <button id="rotLeft">90 degrees</button>
			<button id="rotRight">0 degrees</button> -->
	</div>

</body>
</html>
